﻿ <!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>Draw exercicio</title>
    <style>
        svg {
            border:2px solid darkblue;
            background-color:lightgreen;
            width:500px;
            height:500px;
        }
    </style>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" >
        <text x="150" y="50" fill="url(#grad)" stroke="purple" font-family="verdana" font-weight="bold"  font-size="36">
            <textPath xlink:href="#wavyPath2">
                <tspan>Cubic equation: 5x</tspan>
                <tspan dy="-30" fill="green" font-size="33">3</tspan>
                <tspan dy="+30"> + 4x</tspan>
                <tspan dy="-30" fill="green" font-size="33">2</tspan>
                <tspan dy="+30"> + 6x - 5 = 0</tspan>
            </textPath>
        </text>
        <rect x="0" y="0" width="100" height="75" rx="20" ry="20" fill="red" stroke="blue">
            <g transform="translate(200, 200)">
                <g transform="scale(0.5)"></g>
            </g>
        </rect>
        <rect x="75" y="75" width="100" height="75" fill="yellow" stroke="red"></rect>
        <circle cx="120" cy="280" r="40" fill="url(#grad)" stroke="blue" ></circle>
        <ellipse cx="150" cy="350" rx="110" ry="20" fill="green" stroke="blue" ></ellipse>
        <polyline points="105 100, 120 100, 125 90, 135 110, 145 90, 155 110, 165 90, 175 110" fill="none" stroke="blue"></polyline>
        <path id="triangulo" d="M 150 50 L 250 150 L 50 150 Z" fill="red" stroke="blue" stroke-dasharray="2 2"></path>
        
        <defs>
            <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0.2" stop-color="yellow" />
                <stop offset="0.5" stop-color="green" />
                <stop offset="1.0" stop-color="red" />
            </linearGradient> 
            <path id="wavyPath2"
            d="M 50 250
            C 150 150 250 50 350 150
            C 450 250 550 350 650 250
            C 750 150 850 150 850 150" />
        </defs>
        
    </svg>

    <script>
        var triangulo = document.getElementById("triangulo");
        triangulo.addEventListener("mouseover", function (e) {
            this.style.fillOpacity = 0.3;
        }, false);
        triangulo.addEventListener("mouseout", function (e) {
            this.style.fillOpacity = 1.0;
        }, false);
    </script>
</body>
</html>
